<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-根据页面宽度改变背景颜色</title>
  <style>
    div {
      width: 500px;
      height: 200px;
    }

    /* 1. 媒体查询一般按照从大到小 或者 从小到大的顺利来设置 */
    /* 需求1: 屏幕小于540像素的时候，背景颜色设置蓝色 */
    /* < 540 <= 539 */
    @media screen and (max-width: 539px) {
      div {
        background: rgba(135, 207, 235, 0.445);
      }
    }


    /* 需求2: 屏幕大于等于540像素 并且小于等于969像素的时候背景颜色设置为绿色 */
    /* 540 ~ 970 */
    /* @media screen and (min-width: 540px) and (max-width: 969px) {
      div {
        background: rgba(0, 128, 0, 0.623);
      }
    } */
    /* 简写： 因为层叠性 所以第三个会将第二个覆盖 */
    @media screen and (min-width: 540px) {
      div {
        background: rgba(0, 128, 0, 0.623);
      }
    }


    /* 需求3: 屏幕大于等于970像素时，背景设置为红色 */
    /* >= 970 */
    @media screen and (min-width: 970px) {
      div {
        background: #bb0a0a69;
      }
    }

    /* 1. 使用多个条件时and不能省略 */
    /* 2. px单位记得带上 */
  </style>
</head>

<body>
  <div></div>
</body>

</html>